<template>
 <div class="my-goods-list">
    <MyTable :arr="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>

      <template #body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <td>
          <input type="text"
             class="tag-input form-control"
             style="width: 100px;"
             v-if="scope.row.inputVisible"
             v-focus
             @blur="scope.row.inputVisible = false"
             v-model="scope.row.inputValue"
             @keydown.enter="enterFn(scope.row)"
             @keydown.esc="scope.row.inputValue = ''"
          />
          <button 
            v-else 
            style="display: block;" 
            class="btn btn-primary btn-sm add-tag"
            @click="scope.row.inputVisible = true"
          >+标签</button>
          <span v-for="(value, index) in scope.row.tags" :key="index" class="badge bg-warning">
            {{ value }}
          </span>
        </td>
        <td>
          <button
            class="btn btn-danger btn-sm"
            @click="delBtn(scope.row.id)"
          >删除</button>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from "../components/MyTable";

export default {
  components: {
    MyTable
  },
   data() {
    return {
      list: []
    };
  },
  created() {
    // 请求接口获取列表
    this.getList()
  },
  methods: {
    getList() {
      this.$axios({
        method: 'GET',
        url: "/api/goods",
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      }).catch((err) => {
        console.log(err)
      })
    },
    // 删除当前列
    delBtn(id) {
      // let index = this.list.findIndex(obj => obj.id === id)
      // this.list.splice(index, 1)

      this.list = this.list.filter(obj => obj.id !== id)
    },


    enterFn(obj){ // 回车关闭弹框
      console.log(obj);
      if (obj.inputValue.trim().length === 0) {
        alert('请输入数据')
        return
      }

      obj.tags.push(obj.inputValue) // 表单里的字符串状态tags数组
      obj.inputValue = ""
    }
  },
   
  
}
</script>

<style lang="less" scoped>
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>